import "./HomeSwiper.scss"

import "@a/css/swiper-bundle.css"

import Swiper, { Navigation, Pagination, Autoplay } from "swiper"

export default (() => {

    let homeSwiper = document.createElement("div")

    homeSwiper.classList.add("home-swiper", "auto")

    homeSwiper.innerHTML = `
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="javascript:void(0)"><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90"></img></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a8c552d4d6a06809892d007faeddedf.jpg?w=2452&h=920"></img></a></div>
            </div>
            <div class="swiper-pagenation"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    `
    const hs = homeSwiper.querySelector(".swiper")

    // 初始化swiper

    Swiper.use([Navigation, Pagination, Autoplay]); // 使用分页器和指示器自动播放

    const swiper = new Swiper(hs, {
        direction: 'horizontal', // 垂直切换选项
        autoplay: true,
        loop: true, // 循环模式选项
        pagination: {
            el: hs.querySelector(".swiper-pagenation"),
            clickable: true,
        },
        navigation: {
            nextEl: hs.querySelector('.swiper-button-next'),
            prevEl: hs.querySelector('.swiper-button-prev'),
        },
    })

    hs.addEventListener("mouseenter", function (e) {
        swiper.autoplay.stop()
    })

    hs.addEventListener("mouseleave", function (e) {
        swiper.autoplay.start()
    })

    return homeSwiper
})()